<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		yinbiaoDetailsApi,
		yinbiaoDetailsApis,
	} from '/api/request.js';
	const props = defineProps({});
	onMounted(() => {});
	onUnload(() => {
		uni.$emit('pause');
	});
	onHide(() => {
		uni.$emit('pause');
	});
	const platform = ref({})

	const goback = async () => {
		uni.navigateBack();
	};
	const play = (url) => {
		console.log(url);
		uni.$emit("playAudio", url);
	}
	onHide(() => {
		uni.$emit('pause');
	});
	onUnload(() => {
		uni.$emit('pause');
	});

	const query = ref({
		words: []
	});
	const opts = ref({
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			"#ea7ccc"
		],
		legend: {
			show: true,
			position: "bottom",
			lineHeight: 25
		},
		padding: [0, 0, 0, 0],
		title: {
			name: "",
			fontSize: 24,
			color: "#333",
			offsetX: 30
		},
		subtitle: {
			name: "",
			fontSize: 0,
			color: "#7cb5ec"
		},
		extra: {
			ring: {
				ringWidth: 60,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	})
	const chartData = ref({
		series: [{
			data: []
		}]
	})
	const showEcharts = ref(false)
	onLoad(async (e) => {
		platform.value = uni.getStorageSync('platform');
		console.log(platform.value);
		try {
			let res
			if (e.id) {
				query.value.id = e.id;
				res = await yinbiaoDetailsApi(query.value)
			} else {
				query.value.name = e.title;
				res = await yinbiaoDetailsApis(query.value)
			}
			console.log(res);
			if (platform.value.rpxs > 1.7) {
				// opts.value.legend.position = 'right'
				opts.value.legend.show = false
			} else {
				opts.value.legend.show = false
			}
			query.value = res.data
			opts.value.title.name = `/${query.value.phonetic}/`
			chartData.value.series[0].data = query.value.mapData.map((item) => {
				return {
					"name": `${item.title}:${item.detail}`,
					"value": Number(item.percent),
					"labelShow": true
				}
			})
			showEcharts.value = true
		} catch (error) {
			console.log(error);
		}
	});
	onShow(async () => {

	});
	const showAll = ref(null)
	const changeShowAll = (index) => {
		showAll.value = showAll.value === index ? null : index;
	}
</script>

<template>
	<view class="wrap uni-col" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 音标 </view>
			<image style="opacity: 0;" class="left" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view scroll-y="trye" v-if="query.type2" class="dibu">
			<view class="" style="height: 40rpx;">
			</view>
			<view class="echarts-wrap" v-if="showEcharts">
				<qiun-data-charts :tooltipShow="false" :class="platform.rpxs<1.7?'echars':'default'" type="ring"
					:opts="opts" :chartData="chartData" />
				<view class="list uni-row">
					<view class="item uni-row" v-for="(item,index ) in query.mapData" :key="index">
						<text :style="{background:opts.color[index]}" class="lis"></text>
						<view class="">
							{{item.title}}:{{item.percent}}%
						</view>
					</view>
					<view class="item"
						v-for="(item,index) in 3-(Number(query.mapData.length%3!=0?query.mapData.length%3:3))">
					</view>
				</view>
			</view>
			<view class="item " v-for="(item,index) in Object.keys(query.words) " :key="index">
				<view class="titlle uni-row">
					字母{{item}}发/
					<text class="yinbiao">
						{{query.phonetic}}
					</text>
					/音（{{query?.mapData2[index]?.percent||0}}%）
				</view>
				<view class="list uni-row">
					<view class="items uni-col"
						v-for="(i,iIndex) in query.words[item].slice(0,showAll==index?query.words[item].length-1:5)"
						:key="index" @click="play(i.wordAudio)">
						<view class="headers uni-row">
							<rich-text :nodes="i.wordShow"></rich-text>
							<image src="/static/img/xiaohuatong.png" class="xiaohuatong"></image>
						</view>
						<rich-text class="yinbiao sss" :nodes="i.wordPhonetic"></rich-text>
					</view>
					<view class="itemss uni-row" v-if="query.words[item].length>5">
						<image @click.stop="changeShowAll(index)"
							:src="showAll==index?'/static/img/bushow.png':'/static/img/show.png'" class="show">
						</image>
					</view>
					<template v-if="query.words[item].length<=5">
						<view class="items" style="opacity: 0;"
							v-for="(i,iIndex) in 3-(Number(query.words[item].length%3!=0?query.words[item].length%3:3))"
							:key="index">
						</view>
					</template>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 28rpx;

			.left {
				width: 48rpx;
				margin-right: 32rpx;
			}

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.echarts-wrap {
			margin-top: 30rpx;
			margin-bottom: 20rpx;

			.list {
				padding: 0 60rpx;
				margin-top: 40rpx;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 166rpx;
					height: 22rpx;
					font-size: 16rpx;
					color: #333333;
					margin-bottom: 6rpx;

					.lis {
						flex-shrink: 0;
						width: 40rpx;
						height: 22rpx;
						border-radius: 4rpx;
						margin-right: 10rpx;
					}
				}
			}

			.default {
				padding: 0 28rpx;
			}

			.echars {
				transform: scale(1.2);
			}
		}

		.dibu {
			flex: 1;
			overflow: auto;

			.item {
				padding: 0 28rpx;

				.titlle {
					margin-top: ;
					height: 88rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.list {
					flex-wrap: wrap;
					justify-content: space-between;

					.items {
						width: 218rpx;
						justify-content: space-between;
						height: 100rpx;
						margin-bottom: 20rpx;
						padding: 6rpx 12rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
						border-radius: 8rpx;

						.headers {
							justify-content: space-between;

							.xiaohuatong {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.sss {
							font-size: 24rpx;
							color: #CCCCCC;
						}
					}

					.itemss {
						justify-content: center;
						width: 218rpx;
						height: 100rpx;

						.show {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>